<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/my-css.css" />
    <script type="text/javascript" src="/js/my-js.js" ></script>
    <script type="text/javascript" src="/js/jquery.cookie.js" ></script>
    <script type="text/javascript" src="/js/vue.min.js" ></script>
    <title>Java学习网</title>
</head>
<body>
    <div id="header"></div>
    <script type="text/javascript">moralLoad("#header", "/html/header.html")</script>
    <div class="container">
        <div class="row" id="app" v-cloak>
            <div class="col-xs-offset-1 col-xs-10">
                <ol class="breadcrumb" style="background-color: inherit; margin-bottom: 0;">
                    <li><a href="#">首页</a></li>
                    <li><a href="/tests">在线测试</a></li>
                    <li class="active" v-text="test.title"></li>
                </ol>
            </div>
            <div class="col-xs-offset-1 col-xs-10">
                <form class="panel panel-default" style="padding: 10px 10px 10px 10px;" id="testForm">
                    <h3>
                        <b v-text="test.title"></b>
                    </h3><hr style="margin: 10px 0 10px 0"/>
                    <div v-if="result !== undefined" class="panel panel-default" style="border: 2px solid blue;">
	                    <div class="panel-body">
		                    <h4><b>测试结果：{{result.score}}分</b></h4>
		                    <h4><b>错&ensp;题&ensp;数：{{result.wrong}}</b></h4>
		                    <h4><b>总&ensp;题&ensp;数：{{result.total}}</b></h4>
	                    </div>
                    </div>
                    <div class="panel-body">
                    <div class="panel panel-default" v-for="(question, index) in questions" v-bind:question-id="question.id">
                        <div class="panel-body">
                            <p><h4>
                                <b>{{(index+1) + '. ' + question.content}}&emsp;</b>
                                <span class="text-danger">
                                    <b v-if="question.type === 1">（单选题）</b>
                                    <b v-if="question.type === 2">（多选题）</b>
                                </span>
                            </h4></p>
                            <div v-for="(choice, index) in question.choices" style="font-size: 16px;" class="form-group">
                                <div class="col-xs-1" style="padding-left: 20px; padding-right: 0;">
	                                <input v-bind:type="question.type === 2 ? 'checkbox' : 'radio'"
	                                  v-bind:name="question.id" v-bind:value="choice.id" v-bind:id="question.id + '-' + choice.id" 
	                                  class="form-control" style="width: 16px; height: 16px;"/>
                                </div>
                                <label v-bind:for="question.id + '-' + choice.id" class="col-xs-11 control-label" style="padding-left: 0;">
                                    <span v-bind:option-id="choice.id">{{String.fromCharCode(65 + index)}}</span>
                                    .&emsp;{{choice.content}}
                                </label><br />
                            </div>
                            <div v-if="result !== undefined"><h4>
                                <b>正确答案：
                                    <span v-for="option in result[question.id].answer" v-text="option"></span>
                                </b>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <b>你的选择：
                                    <span v-for="option in result[question.id].choice" v-text="option"></span>
                                </b>
                            </h4></div>
                        </div>
                    </div>
                    <button class="btn btn-success btn-block center-block" style="width: 100px;">交卷</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var test;
    myAjax({
    	type: 'get',
    	url: document.location.pathname.split("/questions")[0],
    	async: false,
    	success: function(data) {test=data}
    });
    var questions;
    myAjax({
    	type: 'get',
    	url: document.location.pathname,
    	async: false,
    	success: function(data) {questions=data}
    });
    var vm = new Vue({
        el: "#app",
        data: {
        	questions: questions,
        	result: undefined
        }
    });
    $("#testForm").submit(function() {
        var $form = $(this);
        var choices = {};
        for (var i in questions) {
            var questionId = questions[i].id;
        	choices[questionId] = getChoice($form.find("input[id^=" + questionId + "]")); 
        }
        myAjax({
            type: 'get',
            url: document.location.pathname + "/answers",
            async: false,
            success: function(data) {answers=data}
        });
        var result = {};
        var wrongCount = 0;
        answers.forEach(function(answer) {
        	var isCorrect = isArrayEquals(answer.choiceIds, choices[answer.questionId]);
        	$("div[question-id='" + answer.questionId + "']")
        	   .css("border", "2px solid " + (isCorrect === true ? "green" : "red"));
        	if (isCorrect === false) ++wrongCount;
        	result[answer.questionId] = {
        		choice: choices[answer.questionId].map(optionIdToOptionType),
                answer: answer.choiceIds.map(optionIdToOptionType),
        	};
        });
        result.wrong = wrongCount;
        result.total = answers.length;
        result.score = Math.round((result.total - result.wrong) / result.total * 100);
        vm.result = result;
        location.href = "#testForm";
        return false;
    });
    function getChoice(choices) {
    	var ret = new Array();
    	choices.each(function() {
    		if (this.checked === true) {
    			ret.push(this.value);
    		}
    	});
    	return ret;
    }
    function isArrayEquals(a, b) {
        if (a.length !== b.length)
            return false;
        a.sort();
        b.sort();
        for (var i=0; i<a.length; ++i)
            if (a[i] !== b[i])
                return false;
        return true;
    }
    function optionIdToOptionType(id) {
    	return $("span[option-id='" + id +"']").text();
    }
</script>
</html>